<template>
	<div class="home">
		<div class="box">
			<el-menu :router='true' mode="horizontal">
				<div class="header-title">书城购物系统</div>
				<el-menu-item index='/home' @click="handleMenuItemClick('/home')">主页</el-menu-item>
				<el-menu-item index='/home/tabs2' @click="handleMenuItemClick('/home/tabs2')">商品详情</el-menu-item>
				<el-menu-item index='/home/tabs3' @click="handleMenuItemClick('/home/tabs3')">购物车</el-menu-item>
				<el-menu-item index="/home/tabs4" @click="handleMenuItemClick('/home/tabs4')">我的订单</el-menu-item>
				<el-menu-item index="/home/tabs5" @click="handleMenuItemClick('/home/tabs5')">个人信息设置</el-menu-item>
				<div class="block avatar">
					<el-avatar :size="50" :src="`${$Imgurl}/api/public/showImg/${cirecleImg}`" />
				</div>
				<div class="login" @click="showLogin">
					{{ username }}
				</div>

				<div class="exit" @click="exitLogin" v-show="ishsow">
					退出
				</div>
			</el-menu>


			<el-dialog title="登录" v-model="isShow" width="30%">
				<el-form :model="formLogin">
					<el-form-item label="账号">
						<el-input v-model="formLogin.username"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="formLogin.password" type="password"></el-input>
					</el-form-item>
				</el-form>
				<template #footer>
					<span>
						<el-button @click="isShow = false">取 消</el-button>
						<el-button @click="toLogin" type="primary">确 定</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
import { $post, $get } from '@/ajax/index.js'
import { mapState, mapMutations } from "vuex";
// 引入拦截器
export default {
	name: 'Home',
	props: [],
	data () {
		return {
			isShow: false,
			formLogin: {
				grant_type: 'password',
				client_id: 'sobook4',
				client_secret: '444444',
				username: '',
				password: ''
			},
			formLabelWidth: '120px',
			path: '/home',
			ishsow: true,
		}
	},
	methods: {

		handleMenuItemClick (route) {
			this.path = route;
		},

		showLogin () {
			this.isShow = true;
		},

		...mapMutations("user", [
			"getCirecleImg",
			"getName",
			"getShow",
			"openLogin",
		]),

		toLogin () {
			// 判断是否输入账号密码
			if (this.formLogin.username === '' || this.formLogin.password === '') {
				this.$message({
					message: '账号或密码不能为空',
					type: 'warning'
				});
				return;
			}

			$post("/oauth/token", this.formLogin)
				.then((res) => {
					localStorage.setItem("token", res.data.access_token);
					//get请求：当登录者的数据[登录者的角色名nickname：登录帐号;role角色]
					$get("/api/info/getUser").then((res) => {
						localStorage.setItem("nickname", res.data.nickname);
						localStorage.setItem("account", res.data.account);
						this.getCirecleImg(res.data.img);
						this.getName(res.data.nickname);
						localStorage.setItem("img", res.data.img);
						// this.ishsow = true;
						localStorage.setItem('ishsow', true);
						//role作用：1.确定登录者登录成功之后跳转到哪个页面：2.确定登录者能够访问的页面权限
						localStorage.setItem("role", res.data.role);

						if (res.data.role === "G") {
							//管理员===后台

							this.$router.push("/adm");
							this.$message.success({
								duration: 1000,
								message: "欢迎来到管理员页面~",
							});
							this.isShow = false;
							return;
						} else {
							this.$router.push("/home");
							this.$message.success({
								duration: 1000,
								message: `登录成功，欢迎${res.data.nickname}来到书城~`,
							});
							// localStorage.setItem('ishsow',true);
							this.ishsow = true;
							this.isShow = false;
							// this.getShow(false);
							return;
						}
					});
				})
				.catch((error) => {
					if (this.formLogin.username != "" && this.formLogin.password != "") {
						this.$message.error({
							duration: 1500,
							message: "账号或密码错误",
						});
					}
				});
		},

		exitLogin () {
			this.ishsow = false;
			this.getName('请登录');
			this.getCirecleImg('');
			localStorage.removeItem("nickname");
			localStorage.removeItem("account");
			localStorage.removeItem("role");
			localStorage.removeItem("token");
			localStorage.removeItem("img");
		},
	},

	computed: {
		...mapState("user", ["cirecleImg", "username", "showAvatar", "circleUrl"]),
	},
}
</script>

<style scoped>
.el-menu {
	background-color: deepskyblue;
}

.header-title {
	float: left;
	line-height: 60px;
	margin-right: 20px;
	margin-left: 20px;
	color: white;
	font-size: 20px;
	font-weight: bold;
	font-size: 20px;
}

.avatar {
	display: flex;
	align-items: center;
	margin-left: 30px;
}

.login {
	margin-right: 5px;
	margin-left: 10px;
	color: black;
	cursor: pointer;
	position: relative;
	top: 35px;

}

.login:hover {
	color: white;
}


/* 默认点击文字颜色 */
.el-menu-item.is-active {
	background-color: white !important;
}

.myname {
	float: right;
	line-height: 60px;
	margin-right: 20px;

}

.exit {
	margin-left: 50px;
	line-height: 60px;
	margin-right: 20px;
	cursor: pointer;
	color: white;
}

.exit:hover {
	color: yellow;
}
</style>
